<template>
  <div class="mainBox">
    <pageTitle Title="VIP管理"></pageTitle>
    <div class="searchBar">
      <div class="left">
        <el-form
          :inline="true"
          :rules="rules"
          :model="searchParam"
          ref="formRef"
        >
          <el-form-item label="考试批次" prop="batchCode">
            <el-select
              v-model="searchParam.batchCode"
              clearable
              class="mySelect1 m-2"
              placeholder="请选择考试批次"
            >
              <el-option
                v-for="item in store.batchList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考号" props="examNo">
            <el-input v-model="searchParam.examNo" placeholder="请输入考号" />
          </el-form-item>
          <el-form-item label="商品类型" prop="productType">
            <el-select
              v-model="searchParam.productType"
              clearable
              class="mySelect1 m-2"
              placeholder="请选择商品类型"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitForm">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-button type="danger" @click="handleSelectionDelete">
          <el-space>
            <el-icon> <Delete /> </el-icon>批量删除
          </el-space>
        </el-button>
        <el-button @click="openAddDialog">
          <el-space>
            <el-icon> <Plus /> </el-icon>批量添加
          </el-space>
        </el-button>
      </div>
    </div>

    <div class="tableBar">
      <MyTable :tableData="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="batchCode"
          label="批次号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="batchName"
          label="批次名称"
          width="180"
          align="center"
        />
        <el-table-column prop="examNo" label="考号" align="center" />
        <el-table-column prop="productType" label="商品类型" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              <el-space>
                <el-icon> <Delete /> </el-icon>删除
              </el-space></el-button
            >
          </template>
        </el-table-column>
      </MyTable>
    </div>
  </div>

  <!-- 添加vip -->
  <AddVipDialog
    v-model:show="addDiglogShow"
    @update="handleListUpdate"
  ></AddVipDialog>
</template>

<script setup>
import AddVipDialog from "./components/add.vue";
import useBatchStore from "@/store/batchStore";
import { getVipList, deleteVip } from "@/Api/pc";
import { useMessage } from "@/utils/utils";
import { showMessage } from "@/utils";
const store = useBatchStore();
const formRef = ref();
const addDiglogShow = ref(false);
const multipleSelection = ref([]);
const searchParam = reactive({
  batchCode: "",
  examNo: "",
  productType: "",
});
const rules = {
  batchCode: [{ required: true, message: "请输入考试批次", trigger: "blur" }],
};
const tableData = ref([]);
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const function_getVipList = async (params) => {
  const response = await getVipList({
    ...params,
  });
  const { code, obj } = response;
  if (code === 0) {
    tableData.value = obj;
  }
};
const openAddDialog = () => {
  addDiglogShow.value = true;
};

const handleListUpdate = () => {
  function_getVipList({ ...searchParam });
};

const handleSubmitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      function_getVipList({ ...searchParam });
    }
  });
};

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const handleSelectionDelete = () => {
  if (!multipleSelection.value.length) {
    showMessage("warning", "请先勾选您要删除的数据");
    return;
  } else {
    const batchCode = searchParam.batchCode;
    const examNos = multipleSelection.value
      .map((item) => item.examNo)
      ?.join(",");
    useMessage("是否删除该vip", () => {
      function_deleteVip({ batchCode, examNos: examNos });
    });
  }
};
const function_deleteVip = async (params) => {
  const response = await deleteVip(params);
  const { code, msg } = response;
  if (code === 0) {
    showMessage("success", `${msg}`);
    function_getVipList({ ...searchParam });
  }
};
const handleDelete = (_, row_data) => {
  const { batchCode, examNo } = row_data;
  useMessage("是否删除该vip", () => {
    function_deleteVip({ batchCode, examNos: examNo });
  });
};
</script>

<style lang="scss" scoped>
.searchBar {
  display: flex;
  justify-content: space-between;
}

@import "@/assets/css/mycss.css";
</style>
